{%load static%}
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>{% block title %}amis demo{% endblock %}</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <link rel="stylesheet" href="{%static 'amis/sdk.css'%}" />
    <link rel="stylesheet" href="{%static 'amis/helper.css'%}" />
    <link rel="stylesheet" href="{%static 'amis/iconfont.css'%}" />
    <style>
      html,
      body,
      .app-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="root" class="app-wrapper"></div>
    {% csrf_token %}
    <script src="{%static 'amis/sdk.js'%}"></script>
    <script type="text/javascript">
      function extractValueFromInput(htmlString) {
        const regex = /<input\s+[^>]*?type="hidden"[^>]*?name="csrfmiddlewaretoken"[^>]*?value="([^"]+)"/i;
        const match = regex.exec(htmlString);
        if (match && match[1]) {
          return match[1];
        } else {
          return "invalid csrf token";
        }
      }
    </script>
    <script type="text/javascript">
      (function () {
        let amis = amisRequire('amis/embed');
        let amisJSON = {% block amisjson %}{% endblock %};
        let amisScoped = amis.embed('#root', amisJSON);
      })();
    </script>
  </body>
</html>
